<template>
	<div>
		<el-form :inline="true">
			<el-form-item>
				<el-input clearable v-model="pageParam.title" placeholder="请输入文章标题"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button @click="getDataList('reset')">查询</el-button>
				<el-button type="primary" @click="openDetails('save')">新增</el-button>
			</el-form-item>
		</el-form>
		<el-table :data="pageList" border v-loading="pageListLoading" style="width: 100%" stripe border
			:header-cell-style="{background:'#eef1f6',color:'#606266',height:'70px'}">
			<el-table-column header-align="center" align="center" width="80" label="序号">
				<template slot-scope="scope"><span>{{scope.$index+(pageParam.page - 1) * pageParam.limit + 1}}
					</span></template>
			</el-table-column>
			<el-table-column prop="title" show-overflow-tooltip header-align="center" align="center" label="文章标题">
			</el-table-column>
			<el-table-column prop="article_type" header-align="center" align="center" label="文章类型">
				<template slot-scope="scope">
					<div v-if="scope.row.article_type==0">图文 </div>
					<div v-if="scope.row.article_type==1">视频</div>
				</template>
			</el-table-column>
			<el-table-column prop="browse_sum" header-align="center" align="center" label="浏览"></el-table-column>
			<el-table-column prop="like_num" header-align="center" align="center" label="点赞"></el-table-column>
			<el-table-column prop="share_sum" header-align="center" align="center" label="分享"></el-table-column>
			<el-table-column prop="is_recommend" header-align="center" align="center" label="是否推荐">
				<template slot-scope="scope">
					<el-switch @change="switchRecommend(scope.row)" :value="scope.row.is_recommend" :active-value="true"
						:inactive-value="false"></el-switch>
				</template>
			</el-table-column>
			<el-table-column prop="added" header-align="center" align="center" label="上下架">
				<template slot-scope="scope">
					<el-switch @change="switchUpSate(scope.row)" :value="scope.row.added" :active-value="true"
						:inactive-value="false"></el-switch>
				</template>
			</el-table-column>
			<el-table-column prop="update_time" header-align="center" align="center" label="修改时间">
			</el-table-column>
			<el-table-column prop="create_time" header-align="center" align="center" label="创建时间">
			</el-table-column>
			<el-table-column header-align="center" align="center" label="操作">
				<template slot-scope="scope">
					<el-button type="text" size="small" @click="openDetails('show',scope.row)" class="c-info">查看
					</el-button>
					<el-button type="text" size="small" @click="openDetails('update',scope.row)">修改</el-button>
					<el-button type="text" size="small" @click="deldata(scope.row)" class="c-error">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination background @size-change="sizeChange" @current-change="pageChange" :current-page="pageParam.page"
			:page-sizes="[10, 20, 30, 50]" :page-size="pageParam.limit" layout="total, sizes, prev, pager, next, jumper"
			:total="totalCount">
		</el-pagination>
		<!-- 详情 -->
		<deatils ref="details" :title='dialogTitle'></deatils>
	</div>
</template>

<script>
	import merchantApi from '@/api/merchantService.js'
	import deatils from './articleDetails'
	export default {
	  components: {
	    deatils
	},
	  data () {
	    return {
	      pageParam: {
	        page: 1,
	        limit: 10
	},
	      totalCount: 0,
	      pageList: [],
	      pageListLoading: false,
	      dialogTitle: '详情', // 详情弹窗 title
	      classList: []
	}
	},
	  created () {
	    this.getDataList()
	},
	  methods: {
			// 获取列表
	    getDataList (reset) {
	      let that = this
	      if (reset) {
	        this.pageParam.page = 1
	}
	      this.pageListLoading = true
	      merchantApi.articleListApi(this.pageParam).then(res => {
	        if (res.data && res.data.code === 200) {
	          this.pageList = res.data.page.list
	          this.totalCount = res.data.page.totalCount
	}
	        that.pageListLoading = false
	})
	},
			// 获取课程分类列表（下拉）
	    getClassSelect () {
	      merchantApi.courseClassApi().then(res => {
	        if (res.data && res.data.code == 200) {
	          this.classList = res.data.list
	}
	})
	},
			// 上下架
	    switchUpSate (row) {
	      this.pageListLoading = true
	      let data = {
	        id: row.id,
	        added: !row.added
	}
	      merchantApi.articleAdded(data).then(res => {
	        this.pageListLoading = false
	        if (res.data && res.data.code == 200) {
	          this.$message.success('操作成功')
	          this.getDataList()
	}
	})
	},
			// 是否推荐
	    switchRecommend (row) {
	      this.pageListLoading = true
	      let data = {
	        id: row.id,
	        is_recommend: !row.is_recommend
	}
	      merchantApi.articleRecommend(data).then(res => {
	        this.pageListLoading = false
	        if (res.data && res.data.code == 200) {
	          this.$message.success('操作成功')
	          this.getDataList()
	}
	})
	},
			// 删除
	    deldata (row) {
	      this.$confirm('确定删除?', '提示', {
	        confirmButtonText: '确定',
	        cancelButtonText: '取消',
	        type: 'warning'
	}).then(() => {
	  this.pageListLoading = true
	  merchantApi.articleDelete(row.id).then(res => {
	    this.pageListLoading = false
	    if (res.data && res.data.code == 200) {
	      this.$message.success('删除成功')
	      this.getDataList()
	}
	})
	}).catch(() => {})
	    },
			// 打开详情弹窗
	    openDetails (e, row) {
	      this.$refs.details.id = null
	      if (e == 'save') {
	        this.dialogTitle = '新增'
	} else if (e == 'show') {
	  this.dialogTitle = '查看'
	  this.$refs.details.id = row.id
	} else if (e == 'update') {
	  this.dialogTitle = '修改'
	  this.$refs.details.id = row.id
	}
	      this.$refs.details.dialogVisible = true
	},
			// 每页数
	    sizeChange (val) {
	      this.pageParam.limit = val
	      this.pageParam.page = 1
	      this.getDataList()
	    },
			// 当前页
	    pageChange (val) {
	      this.pageParam.page = val
	      this.getDataList()
	    }
	}
	}
</script>

<style lang="scss" scoped>
</style>
